<template>
  <div class="change-password-container">
    <div class="password-header">
      <h2>修改密码</h2>
      <p>请填写当前密码和新密码</p>
    </div>

    <div class="password-form">
      <div class="form-group">
        <label for="oldPassword" class="form-label">当前密码:</label>
        <input
          id="oldPassword"
          v-model="passwordForm.oldPassword"
          type="password"
          placeholder="请输入当前密码"
          class="form-input"
          :class="{ 'error': errors.oldPassword }"
        />
        <div v-if="errors.oldPassword" class="error-message">{{ errors.oldPassword }}</div>
      </div>

      <div class="form-group">
        <label for="newPassword" class="form-label">新密码:</label>
        <input
          id="newPassword"
          v-model="passwordForm.newPassword"
          type="password"
          placeholder="请输入新密码"
          class="form-input"
          :class="{ 'error': errors.newPassword }"
        />
        <div v-if="errors.newPassword" class="error-message">{{ errors.newPassword }}</div>
      </div>

      <div class="form-group">
        <label for="confirmPassword" class="form-label">确认新密码:</label>
        <input
          id="confirmPassword"
          v-model="passwordForm.confirmPassword"
          type="password"
          placeholder="请再次输入新密码"
          class="form-input"
          :class="{ 'error': errors.confirmPassword }"
        />
        <div v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</div>
      </div>

      <div class="form-actions">
        <button @click="goBack" class="btn btn-cancel">返回</button>
        <button
          @click="handlePasswordChange"
          class="btn btn-submit"
          :disabled="loading"
        >
          {{ loading ? '修改中...' : '修改密码' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 密码表单数据
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 错误信息
const errors = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 加载状态
const loading = ref(false)

// 验证表单
const validateForm = (): boolean => {
  // 清空错误信息
  errors.value = { oldPassword: '', newPassword: '', confirmPassword: '' }

  let isValid = true

  // 验证当前密码
  if (!passwordForm.value.oldPassword.trim()) {
    errors.value.oldPassword = '请输入当前密码'
    isValid = false
  }

  // 验证新密码
  if (!passwordForm.value.newPassword.trim()) {
    errors.value.newPassword = '请输入新密码'
    isValid = false
  
  }

  // 验证确认密码
  if (!passwordForm.value.confirmPassword.trim()) {
    errors.value.confirmPassword = '请确认新密码'
    isValid = false
  } else if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    errors.value.confirmPassword = '两次输入的密码不一致'
    isValid = false
  }

  return isValid
}

// 修改密码
const handlePasswordChange = async () => {
  if (!validateForm()) {
    return
  }

  loading.value = true

  try {
    const token = localStorage.getItem('token')
    if (!token) {
      alert('未登录，请重新登录')
      window.location.href = '/Login'
      return
    }

    const passwordData = {
      oldPassword: passwordForm.value.oldPassword,
      newPassword: passwordForm.value.newPassword
    }

    const response = await fetch('http://localhost:8080/manager/password', {
      method: 'PUT',
      headers: {
        'token': token,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(passwordData)
    })

    const result = await response.json()

    if (result.success) {
      alert('密码修改成功！')
      // 清空表单
      passwordForm.value = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    } else {
      alert(`密码修改失败: ${result.message}`)
    }
  } catch (err) {
    console.error('修改密码失败:', err)
    alert('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  window.dispatchEvent(new CustomEvent('navigate-to-menu'))
}
</script>

<style scoped>
.change-password-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.password-header {
  text-align: center;
  margin-bottom: 30px;
}

.password-header h2 {
  color: #2c3e50;
  margin-bottom: 8px;
}

.password-header p {
  color: #7f8c8d;
}

.password-form {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
}

.form-input.error {
  border-color: #e74c3c;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 5px;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cancel {
  background: #95a5a6;
  color: white;
}

.btn-cancel:hover {
  background: #7f8c8d;
}

.btn-submit {
  background: #3498db;
  color: white;
}

.btn-submit:hover:not(:disabled) {
  background: #2980b9;
}

.btn-submit:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}
</style>
